﻿
@{
    ViewBag.Title = "Index";
}


<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span class="c-gray en">&gt;</span> 用户管理 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="pd-20">
    <div class="text-c">
        <input type="text" class="input-text" style="width:250px" id="txt_Name" placeholder="输入管理员名称">
        <button class="btn btn-success" id="btn_Search"><i class="Hui-iconfont">&#xe665;</i> 搜索用户</button>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" id="btn_DeleteBatch" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a href="javascript:;" id="btn_AddUser" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加用户</a></span>  </div>
    <table id="tb_UserList" class="table table-border table-bordered table-bg">
        <thead>
            <tr>
                <th scope="col" colspan="9">管理员列表</th>
            </tr>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="200">管理员</th>
                <th width="200">手机</th>
                <th width="200">邮箱</th>
                <th width="200">登录错误次数</th>
                <th width="200">城市</th>
                <th width="200">操作</th>
            </tr>
        </thead>
    </table>
</div>

@section footScript
{
    <script src="~/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script>


        //初始化查询参数
        var params = {};

        //通过datatalbe渲染列表
        $(function () {
            var table = $("#tb_UserList").DataTable({
                info: false, //是否显示情报 就是"当前显示1/100记录"这个信息
                pagingType: "full_numbers",//显示首页尾页
                processing: true, //显示加载中提示....
                ordering: false,//是否排序
                paging: true,//是否显示分页
                searching: false,//是否显示默认的搜索
                //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
                columns: [
                    { data: 'Id' },
                    { data: 'Name' },
                    { data: 'PhoneNum' },
                    { data: 'Email' },
                    { data: 'LoginErrorTimes' },
                    { data: 'CityName' },
                    {
                        data: 'Id', render: function (data, type, full, callback) {
                            return (' <a title="编辑" href="javascript:;" data-id=' + data + ' class="ml-5 edit" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> <a title="删除"  href="javascript:;"  data-id=' + data + ' class="ml-5 delete" style="text-decoration:none"> <i class="Hui-iconfont">&#xe6e2;</i></a>   ')
                        }
                    }

                ],
                createdRow: function (row, data, index) {
                    /* 设置表格中的内容居中 */
                    $('td', row).attr("class", "text-c");
                },
                //开启服务器模式
                serverSide: true,
                //使用ajax异步请求
                ajax: {
                    type: 'POST',
                    url: '/AdminUser/GetList',
                    data: function (d) {
                        params.start = d.start;//开始的序号
                        params.length = d.length;//要取的数据的条数
                        return params;//自定义需要传递的参数。
                    }
                },
                //自定义列
                columnDefs: [{
                    targets: 0,
                    render: function (data, type, row, meta) {
                        return '<input type="checkbox" value="' + row.Id + '" name="selectIDs">';
                    }
                }
                    // { "orderable": false, "targets": 4 },
                ]
            });


            //搜索权限
            $("#btn_Search").click(function () {
                //获取输入的关键字
                var name = $("#txt_Name").val();

                //为请求参数赋值，datatable进行重新渲染的时候会提交此参数
                params.name = name;

                //使datatable重新请求
                table.ajax.reload();

            });

            //添加权限
            $("#btn_AddUser").click(function () {
                //填出遮罩层
                layer_show("添加权限", "/AdminUser/Add", 600, 500);
            });



            //编辑权限
            //获取所有的编辑按钮
            //当页面加载在这个位置的时候，因为编辑列是通过datatable动态渲染出来的，所以执行到这个位置的时候
            //页面中还不存在编辑按钮，不能直接通过类选择器获取到，可以通过live()或者livequery.js来实现

            $(".edit").livequery("click", function () {

                //获取要编辑的id
                var id = $(this).attr("data-id");

                //弹出编辑对话框
                layer_show("编辑权限", "/AdminUser/Edit?id=" + id, "600", "300");

            });


            //删除权限
            $(".delete").livequery("click", function () {

                //_this指代当前点击的删除元素
                var _this = $(this);

                //弹出确认框
                layer.confirm('您确定要删除该权限吗？', { icon: 3, title: '温馨提示' }, function (index) {

                    //获取要删除的权限id
                    var id = _this.attr("data-id");

                    console.log(id);

                    //向服务端发送ajax请求
                    $.post("/AdminUser/Delete", { id: id }, function (data) {
                        if (data.State == 1) {
                            //提示信息
                            layer.msg('删除成功', { icon: 1 });

                            //刷新列表
                            location.reload();
                        }
                        else {
                            layer.msg(data.ErrorMessage, { icon: 5 });
                        }

                    }, "json");


                    //关闭遮罩层
                    layer.close(index);
                });

            });


            //批量删除权限
            $("#btn_DeleteBatch").click(function () {
                //判断用户选择的项的个数
                //如果用户没有选择，则提示用户先选择要删除的项
                //将用户选择的权限id放到一个数组中保存，在向服务端发送ajax请求的时候当作参数传输

                //定义一个空数组
                var idArray = [];

                //获取页面中所有打勾的复选框，获取到复选框的value值，存入数组
                $(":checkbox[name='selectIDs']:checked").each(function (k, v) {
                    idArray.push($(v).val());
                });

                //当用户没有选择的时候给出提示
                if (idArray.length == 0) {
                    layer.msg('请选择您要删除的项', { icon: 5 });
                    return;
                }

                //弹出确认框
                layer.confirm('您确定要删除选择的权限吗？', { icon: 3, title: '温馨提示' }, function (index) {

                    //向服务端发送ajax请求
                    $.post("/AdminUser/Deletes", { ids: idArray }, function (data) {
                        if (data.State == 1) {
                            //提示信息
                            layer.msg('删除成功', { icon: 1 });

                            //刷新列表
                            location.reload();
                        }
                        else {
                            layer.msg(data.ErrorMessage, { icon: 5 });
                        }

                    }, "json");


                    //关闭遮罩层
                    layer.close(index);
                });

            });

        });



    </script>

}
